<script setup lang="ts">
import Carousel from './carousel/index.vue';
import Search from './search/index.vue';
import Level from './level/index.vue';
import Region from './region/index.vue';
import Card from './card/index.vue';
import {onMounted, ref} from 'vue';
import {reqHospital} from '@/api/home';
import type {Content,HospitalResponseData} from '@/api/home/type.ts';

let pageNo = ref<number>(1);
let pageSize = ref<number>(10);
let hospitalArray = ref<Content>([]);
let hospitalTotal = ref<number>(0);

onMounted(() => {
  getHospitalInfo();
})

const getHospitalInfo = async () => {
  let result:HospitalResponseData  = await reqHospital(pageNo.value, pageSize.value);
  if (result.code === 200) {
    hospitalArray.value = result.data.content;
    hospitalTotal.value = result.data.totalElements;
  }
};

const currentChange = () => {
  getHospitalInfo();
};

const sizeChange = () => {
  getHospitalInfo();
};

</script>

<template>
  <div>
    <Carousel/>
    <Search/>
    <el-row gutter="20">
      <el-col :span="20">
        <Level/>
        <Region/>
        <div class="hospital">
          <Card class="item" v-for="(item,index) in hospitalArray" :key="index" :hospitalInfo="item"/>
        </div>
        <el-pagination
            v-model:current-page="pageNo"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            :background="true"
            layout="prev, pager, next, jumper,->,sizes,total,"
            :total="hospitalTotal"
            @current-change="currentChange"
            @size-change="sizeChange"
        />
      </el-col>
      <el-col :span="4">2222</el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
.hospital {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .item {
    width: 48%;
    margin: 10px 0;
  }
}
</style>